<template>
  <Compact style="width: 100%">
    <FormItemRest>
      <InputNumber
        placeholder="请输入经度"
        :min="73.33"
        :max="135.05"
        :precision="4"
        v-model:value="lon"
        :style="{ flex: 1 }"
      />
      <span style="padding-inline: 10px">-</span>
      <InputNumber
        placeholder="请输入纬度"
        :min="3.51"
        :max="53.33"
        :precision="4"
        v-model:value="lat"
        :style="{ flex: 1 }"
      />
    </FormItemRest>
    <Button @click="onSelectInMap">从地图选择</Button>
  </Compact>
  <Modal
    title="选择经纬度"
    destroy-on-close
    :width="900"
    v-model:open="visible"
  >
    <LbsMap
      v-model:lat="lat"
      v-model:lon="lon"
      :style="{ width: '100%', height: '600px' }"
    />
    <template #footer>
      <Button @click="visible = false" type="primary">确认</Button>
    </template>
  </Modal>
</template>

<script setup lang="tsx">
import { ref } from 'vue';
import {
  Button,
  Compact,
  FormItemRest,
  InputNumber,
  Modal,
} from 'ant-design-vue';
import LbsMap from '../Map/index.vue';

defineOptions({
  inheritAttrs: false,
});

const lon = defineModel('lon', { type: Number, default: undefined });
const lat = defineModel('lat', { type: Number, default: undefined });

const visible = ref(false);
const onSelectInMap = () => {
  visible.value = true;
};
</script>
